﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Floodlight OpenFlow Controller - Access Control List</title>
    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css"
          rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="../bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- Animate.css -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" type="text/css"/>
    <link href="../bower_components/pnotify/css/pnotify.css" rel="stylesheet"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html" id="home-button-title">Floodlight OpenFlow Controller </a>
        </div>
        <!-- /.navbar-top-links -->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <nav id="navMenu"></nav>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
        <!-- /.navbar-static-side -->
    </nav>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">Access Control Lists </h3>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-md-1">
                <a href="#" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addRuleModal">Add New</a>
            </div>
            <div class="col-md-1">
                <a href="#" class="btn btn-sm btn-danger" data-toggle="modal" id="btnDeleteAll">Delete All</a>
            </div>
            <br/><br/>
        </div>

        <div class="row">

            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <i class="fa fa-table fa-fw"></i>Control List
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <table class="table table-bordered table-hover table-responsive responsive-utilities"
                               id="aclTable">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Source</th>
                                <th>Dest</th>
                                <th>Source IP</th>
                                <th>Mask</th>
                                <th>Dest IP</th>
                                <th>Mask</th>
                                <th>Prot.</th>
                                <th>Dest TP</th>
                                <th>Act.</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                    <!-- /.panel-body -->
                </div>
            </div>
        </div>

        <!-- Add Rule-->
        <div class="modal fade" tabindex="-1" id="addRuleModal" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" id="roleModalCloseButton2" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Create Rule</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Protocol</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbTCP" name="check3" checked="checked"/> TCP
                                </label>
                                <label>
                                    <input type="radio" id="rbUDP" name="check3"> UDP
                                </label>

                                <label>
                                    <input type="radio" id="rbICMP" name="check3"> ICMP
                                </label>
                            </div>

                            <label>Source IPv4</label>
                            <input class="form-control" type="text" id="src-ip" placeholder="A.B.C.D/M">

                            <label>Dest IPv4</label>
                            <input class="form-control" type="text" id="dst-ip" placeholder="A.B.C.D/M">

                            <label>Dest TP</label>
                            <input class="form-control" type="text" id="tp-dst" placeholder="Dest Tp">

                            <label>Action</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbAllow" name="check1" checked="checked"/> ALLOW
                                </label>
                                <label>
                                    <input type="radio" id="rbDeny" name="check1"> DENY
                                </label>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" id="btnAddRule" class="btn btn-sm btn-primary">Create</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->
    <div id="login-modal-include"></div>

</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>

<!-- PNotify -->
<script src="../bower_components/pnotify/pnotify.buttons.js"></script>
<script src="../bower_components/pnotify/pnotify.core.js"></script>
<script src="../bower_components/pnotify/pnotify.nonblock.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script src="../js/jquery.cookie.js"></script>

<script src="../js/querystringparser.js"></script>

<!-- Custom scripts to load in HTML -->
<script src="../js/navbar.js"></script>
<script>
    $(function () {
        $("#login-modal-include").load("loginmodal.html");
    });
</script>

<script>
    var ipaddress = $.cookie('cip');
    var port = $.cookie('cport');
    if (ipaddress == null || ipaddress == "") window.location.href = "login.html";

    $("#btnAddRule").click(function () {

        var nw_proto = "";

        if ($("#rbTCP").is(':checked')) nw_proto = "TCP";
        else if ($("#rbUDP").is(':checked')) nw_proto = "UDP";
        else nw_proto = "ICMP";

        var dst_ip = $("#dst-ip").val();
        var src_ip = $("#src-ip").val();
        var tp_dst = $("#tp-dst").val();
        var action = "";
        if ($("#rbDeny").is(':checked')) action = "DENY";
        else action = "ALLOW";

        if (nw_proto != "" || tp_dst != "" || dst_ip != "" || src_ip != "" || action != "") {

            AddFirewallRule(nw_proto, tp_dst, dst_ip, src_ip, action);

        }
        else {

            new PNotify({
                title: 'Please Enter A Value!',
                text : 'Enter a valid value.',
                type : 'warning',
                hide : true
            });
        }
    });

    function AddFirewallRule(nw_proto, tp_dst, dst_ip, src_ip, action) {
        var postData = "";
        postData = '{"nw-proto": ' + "\"" + nw_proto + "\""
                + ',"tp-dst": ' + "\"" + tp_dst + "\""
                + ',"dst-ip": ' + "\"" + dst_ip + "\""
                + ',"src-ip": ' + "\"" + src_ip + "\""
                + ',"action": ' + "\"" + action + "\"" + '}';

        $.ajax({
            type    : "POST",
            dataType: 'json',
            url     : "http://" + ipaddress + ":" + port + "/wm/acl/rules/json",
            data    : postData,
            success : function (data) {

                if (data["status"] == "Success! New rule added.") {
                    new PNotify({
                        title: 'Rule Added!',
                        text : 'Rule successfully added.',
                        type : 'success',
                        hide : true
                    });

                    GetRules();
                }
                else {

                    new PNotify({
                        title: 'Error occured.',
                        text : data["status"],
                        type : 'error',
                        hide : true
                    });
                }

            },
            error   : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });

    }

    GetRules();

    function GetRules() {

        var url = "http://" + ipaddress + ":" + port + "/wm/acl/rules/json";

        $(document).ready(function () {

            $('#aclTable').DataTable().destroy();

            $('#aclTable').DataTable({
                responsive  : true,
                searching: false,
                lengthChange: false,
                scrollX: true,
                paging: false,
                ajax        : {
                    url    : url,
                    dataSrc: ''
                },
                "columnDefs": [{
                    // The `data` parameter refers to the data for the cell (defined by the
                    // `data` option, which defaults to the column being worked with, in
                    // this case `data: 0`.
                    "render" : function (data, type, row) {
                        return "<a class='btn btn-xs btn-danger' onclick='DeleteRule(" + data + ")' >Delete</<a>";
                    },
                    "targets": 10
                }],
                columns     : [
                    {data: 'id'},
                    {data: 'nw_src'},
                    {data: 'nw_dst'},
                    {data: 'nw_src_prefix'},
                    {data: 'nw_src_maskbits'},
                    {data: 'nw_dst_prefix'},
                    {data: 'nw_dst_maskbits'},
                    {data: 'nw_proto'},
                    {data: 'tp_dst'},
                    {data: 'action'},
                    {data: 'id'}
                ]
            });

        });

    }

    function DeleteRule(ruleId) {

        if (confirm("Rule will be deleted. To continue press 'OK' !")) {

            $.ajax({
                type    : "DELETE",
                dataType: 'json',
                url     : "http://" + ipaddress + ":" + port + "/wm/acl/rules/json",
                data    : '{ "ruleid":' + "\"" + ruleId + "\"" + '}',
                success : function (data) {

                    new PNotify({
                        title: 'Rule is deleted!',
                        text : 'Rule successfully deleted.',
                        type : 'success',
                        hide : true
                    });

                    GetRules();

                },
                error   : function (jqXHR, textStatus, errorThrown) {
                    alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
                }
            });
        }

    }

    $("#btnDeleteAll").click(function () {

        DeleteAll();

    });

    function DeleteAll() {

        if (confirm("All rules will be deleted. To continue press 'OK' !")) {

            $.ajax({
                type    : "GET",
                dataType: "json",
                url     : "http://" + ipaddress + ":" + port + "/wm/acl/clear/json",
                success : function (data) {

                    new PNotify({
                        title: 'All rules are deleted!',
                        text : 'Rules successfully deleted.',
                        type : 'success',
                        hide : true
                    });

                    GetRules();

                },
                error   : function (jqXHR, textStatus, errorThrown) {
                    alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
                }
            });
        }

    }

</script>
</body>
</html>
